Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

stylelint-config-cloudfour

Package Overview
Dependencies
Maintainers
6
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stylelint-config-cloudfour

Cloud Four's stylelint config

  • 6.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
253
decreased by-4.17%
Maintainers
6
Weekly downloads
 
Created
Source

stylelint-config-cloudfour

NPM version Build Status Renovate

A sharable stylelint config object that enforces Cloud Four's CSS Standards

Note that this config mostly just extends the SUIT config, and any additions or changes from the SUIT standard should be well-documented here to explain the deviation.

Installation

Install stylelint and stylelint-config-cloudfour:

npm install stylelint stylelint-config-cloudfour --save-dev

Usage

If you've installed stylelint-config-cloudfour locally within your project, just set your stylelint config to:

{
  "extends": "stylelint-config-cloudfour"
}

You'll probably also want to add a script to your package.json file to make it easier to run Stylelint with this config:

"scripts": {
  "lint:css": "stylelint '**/*.css'"
}

Using with Prettier

It's common to pair Stylelint with Prettier. If you're going to use both, you'll want to add stylelint-config-prettier, which is a config that disables any Stylelint rules that conflict with Prettier.

npm install stylelint-config-prettier --save-dev

Then add it to your Stylelint config. It'll need to be the last item in the extends array so it can override other configs.

{
  extends: ["stylelint-config-cloudfour", "stylelint-config-prettier"],
}

Then you can update your package.json script to run Prettier as well as Stylelint:

"scripts": {
  "lint:css": "prettier --list-different '**/*.css' && stylelint '**/*.css'"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule,and add the unit-whitelist rule:

{
  "extends": "stylelint-config-cloudfour",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "ignores"
      ]
    }],
    "indentation": "tab",
    "number-leading-zero": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Documentation

What's the difference between stylelint-config-cloudfour-suit and stylelint-config-cloudfour?

stylelint-config-cloudfour only contains the CSS formatting rules. stylelint-config-cloudfour-suit extends it, and additionally enforces the SUIT naming convention. In most cases, you should use stylelint-config-cloudfour-suit, but if your project doesn't follow the SUIT naming scheme, then you can use stylelint-config-cloudfour directly.

Extends

Plugins

Configured Lints

This is a list of the lints turned on in this configuration (beyond the ones that come from stylelint-config-suitcss & stylelint-config-standard-scss), and what they do.

  • at-rule-empty-line-before: Require an empty line before at-rules. disabled temporarily, pending #2480
  • comment-empty-line-before: Require an empty line before comments. overriding SUIT rule to exclude the first nested comment in a block.
  • max-line-length: Limit line lengths to 80 characters for comments only. overriding SUIT rule to ignore comments that contain URLs.
  • no-descending-specificity: Disallow selectors of lower specificity from coming after overriding selectors of higher specificity. disabled due to false positives in SCSS contexts.
  • rule-empty-line-before: Require an empty line before multi-line rules. overriding SUIT rule to exclude the first multi-line rule in a block, and to ignore rules following comments.
Order
  • order/order: Specifies the order of content within declaration blocks: Variables, @include statements, declarations, block @include statements, nested rules.
  • order/properties-alphabetical-order: Specify the alphabetical order of properties within declaration blocks.
SCSS
Performance

Changelog

License

Keywords

FAQs

Package last updated on 22 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc